<template>
   <div class="RunPaymentOrder" :style="{minHeight:$store.state.minHeight+'rem'}">
      <myHead title="支付订单"></myHead>
      <div class="content">
         <div class="content-top">
            <p>支付剩余时间</p>
            <div class="zfTime">
               <p>1</p>
               <p>4</p>
               <span>&nbsp;:&nbsp;</span>
               <p>3</p>
               <p>3</p>
            </div>
         </div>
         <div class="yfMoney">应付金额:&emsp;￥10.00</div>
      </div>
      <!--  支付方式选择  -->
      <div class="zfType">
         <div class="zfItem" v-for="(x,y) in typeList">
            <p><img :src="x.url" alt=""></p>
            <div @click="typeCallback(y)">
               <p>{{x.text}}</p>
               <p>{{x.msg}}</p>
            </div>
            <p><img :src="typeState[y]?'../../../static/img/cz002.png':'../../../static/img/cz003.png'" alt=""></p>
         </div>
      </div>
   <!--  支付按钮  -->
      <div class="btn">确认支付10.00元</div>
   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead";

    export default {
        name: "RunPaymentOrder",
        components: {
            myHead
        },
        data(){
            return {
                typeList:[{text:'微信支付',msg:'推荐安装最新版微信，支付更加便捷',url:'../../../static/img/zf292.png'},
                    {text:'银联支付',msg:'服务有银联支付提供，需开通网银',url:'../../../static/img/zf291.png'},{text:'账户余额支付',msg:'平台账户内余额抵扣支付方式',url:'../../../static/img/zf293.png'}],
                typeState:[true,false,false]
            }
        },
        methods:{
            typeCallback(index){
                this.typeState = [false,false,false];
                this.typeState[index] = true;
            }
        }
    }
</script>

<style scoped>
   .RunPaymentOrder {
      box-sizing: border-box;
      padding-top: .5rem;
   }

   .content-top {
      height: .85rem;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
   }

   .content-top > p {
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #363636;
      margin-bottom: .15rem;
   }

   .zfTime {
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .zfTime > p {
      width: .16rem;
      height: .16rem;
      background-color: #363636;
      text-align: center;
      line-height: .16rem;
      margin-right: .01rem;
      color: #EEECEF;
      font-size: .12rem;
      font-family: PingFangSC;
      font-weight: 400;
   }

   .yfMoney {
      height: .5rem;
      padding: 0 .1rem;
      background-color: #F5F5F5;
      font-size: .15rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #363636;
      line-height: .5rem;
   }

   .zfType {
      margin-bottom: .8rem;
   }

   .zfItem {
      width: 100%;
      box-sizing: border-box;
      padding: 0 .15rem;
      height: .5rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      border-bottom: .01rem solid rgba(54, 54, 54, .2);
   }

   .zfItem:nth-last-child(1) {
      border: none;
   }

   .zfItem > p:nth-child(1) {
      width: .4rem;
      height: .3rem;
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .zfItem > p:nth-child(3) {
      width: .20rem;
      height: .3rem;
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .zfItem > p:nth-child(1) > img {
      width: .22rem;
      max-height: .19rem;
   }

   .zfItem > p:nth-child(3) > img {
      width: .19rem;
      max-height: .19rem;
   }

   .zfItem > div {
      width: calc(100% - .7rem);
      height: 100%;
      display: flex;
      flex-flow: column;
      justify-content: center;
   }

   .zfItem > div > p:nth-child(1) {
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #363636;
      margin-bottom: .02rem;
   }

   .zfItem > div > p:nth-child(2) {
      font-size: .11rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(54, 54, 54, .5);
   }

   .btn {
      width:3.3rem;
      height:.5rem;
      background:linear-gradient(0deg,rgba(255,142,65,1),rgba(255,110,0,1));
      box-shadow:0 .04rem .11rem 0 rgba(255,112,5,0.4);
      border-radius:.24rem;
      text-align: center;
      line-height: .5rem;
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #FFFFFF;
      margin: 0 auto;
   }
</style>
